<template>
  <div>
    <!-- el-tree：一定会用：
           show-checkbox:是否显示多选框
           default-checked-keys=['值']，只管选中，其它项一律不理
           node-key='指令选中项的字段名'
           check-strictly:是否父子关联，false:关联  true:不关联

          getCheckedKeys:el-tree的methods方法,配合 ref与  node-key
          this.$refs.tree的ref值.getCheckedKeys()

          setCheckedKeys([需要勾选项对应的值]),只有设置项会选中，其它项都会取消选中
          清空：this.$refs.tree的ref值.setCheckedKeys([])，它需要el-tree已渲染完成才可用
          管理系统：
             走流程
             审批：选部门中某个人（el-tree选中）审批
             组织架构调用，也需要el-tree
             权限：el-tree

    -->
    <h3>{{ checked }}</h3>
    <el-tree
      ref="tree"
      check-strictly
      node-key="id"
      :default-checked-keys="checked"
      show-checkbox
      :data="list"
      :props="{
        label: 'city'
      }"
    />
    <el-button @click="getIds">获取选中项的id</el-button>
    <el-button @click="setSelect">设置选中项</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: [],
      list: [
        {
          id: 1,
          city: '深圳',
          children: [
            {
              id: 2,
              city: '宝安'
            },
            {
              id: 4,
              city: '南山'
            }
          ]
        },
        {
          id: 3,
          city: '广州'
        }
      ]
    }
  },
  methods: {
    getIds() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setSelect() {
      this.$refs.tree.setCheckedKeys([1])
    }
  }
}
</script>
<style></style>
